<script setup lang="ts">
import { computed } from "vue";
import { Field, Button, Icon } from "vant";
import type { OrderForm } from "../types";

const props = withDefaults(
	defineProps<{
		form: OrderForm;
	}>(),
	{}
);

const emits = defineEmits<{
	(e: "tp-click", index: number): (index: number) => void;
	(e: "tag-click", index: number): (index: number) => void;
}>();

const finalForm = computed(() => props.form);
const finalMaterialList = computed(() => finalForm.value.detailList);

const tpClick = (index: number) => {
	emits("tp-click", index);
};

const tagClick = (index: number) => {
	emits("tag-click", index);
};

const addRow = () => {
	finalForm.value.detailList.push({});
};

const delRow = (index: number) => {
	finalForm.value.detailList.splice(index, 1);
};

const getRules = (msg: string, trigger: string): any => {
	return [{ required: true, message: (trigger == "onChange" ? "请选择" : "请填写") + msg, trigger }];
};
</script>

<template>
	<div class="pur-material" v-if="finalForm.projectCode">
		<template v-for="(item, i) of finalMaterialList" :key="i">
			<div class="pur-del">
				<p>研发试制明细({{ i + 1 }})</p>
				<span v-if="i > 0">
					<Icon @click="delRow(i)" style="margin-left: 10px" name="delete-o" />
				</span>
			</div>
			<template v-if="finalForm.pcbFlag == '是'">
				<Field
					v-model="item.materialCode"
					:rules="getRules('物料号', 'onBlur')"
					label-align="top"
					label="物料号"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.materialName"
					:rules="getRules('名称', 'onBlur')"
					label-align="top"
					label="名称"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.amount"
					:rules="getRules('数量', 'onBlur')"
					label-align="top"
					label="数量"
					type="number"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.testReason"
					:rules="getRules('试制原因', 'onBlur')"
					label-align="top"
					label="试制原因"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.patchFlagText"
					:rules="getRules('是否贴片', 'onChange')"
					@click="tpClick(i)"
					label-align="top"
					label="是否贴片"
					readonly
					is-link
					placeholder="请选择"
					required
				/>
				<Field
					v-model="item.repoLink"
					label-align="top"
					label="仓库链接"
					:rules="getRules('仓库链接', 'onBlur')"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.tagFlagText"
					:rules="getRules('是否打过tag', 'onChange')"
					label-align="top"
					@click="tagClick(i)"
					label="是否打过tag"
					readonly
					is-link
					placeholder="请选择"
					required
				/>
				<Field
					v-model="item.remark"
					label-align="top"
					label="备注"
					:rules="getRules('备注', 'onBlur')"
					placeholder="请输入"
					required
				/>
			</template>
			<template v-else-if="finalForm.pcbFlag == '否'">
				<Field
					v-model="item.materialCode"
					label-align="top"
					label="物料号"
					:rules="getRules('物料号', 'onBlur')"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.materialName"
					label-align="top"
					label="产品名称"
					:rules="getRules('产品名称', 'onBlur')"
					placeholder="请输入"
					required
				/>
				<Field
					v-model="item.amount"
					label-align="top"
					label="所需数量"
					:rules="getRules('所需数量', 'onBlur')"
					placeholder="请输入"
					required
				/>
				<Field v-model="item.specification" label-align="top" label="规格型号" placeholder="请输入" />
				<Field v-model="item.drawCode" label-align="top" label="图号" placeholder="请输入" />
			</template>
		</template>
		<Button type="primary" @click="addRow" style="border: none" block icon="plus" plain>添加明细</Button>
	</div>
</template>

<style lang="less" scoped>
.pur-material {
	.pur-del {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 16px;
		font-size: 12px;
		p {
			margin: 0;
		}
		span {
			font-size: 16px;
		}
	}
}
</style>
